<template>
    <div id="container">
        <div id="viewDiv"></div>
        <el-main id="tool" style="width:410px;border-radius:10px">
            <div id="d1" style="width:100%;"></div>
            <div id="d2" style="width:100%;">
                <el-tabs type="border-card" v-model="tabs" style="height:100%;">
                    <el-tab-pane label="显示元素" name="显示元素">
                        <span>创建工具: </span>
                        <el-checkbox-group v-model="创建工具" @change="创建工具_change" >
                            <el-checkbox-button label="点" value="point"></el-checkbox-button>
                            <el-checkbox-button label="线" value="polyline"></el-checkbox-button>
                            <el-checkbox-button label="面" value="polygon"></el-checkbox-button>
                            <el-checkbox-button label="圆形" value="circle"></el-checkbox-button>
                            <el-checkbox-button label="矩形" value="rectangle"></el-checkbox-button>
                        </el-checkbox-group>
                        <span>选择工具:</span>
                        <el-checkbox-group v-model="选择工具"  @change="选择工具_change" >
                            <el-checkbox-button label="点选" value="点选"></el-checkbox-button>
                            <el-checkbox-button label="框选" value="框选"></el-checkbox-button>
                            <el-checkbox-button label="套索" value="套索"></el-checkbox-button>
                        </el-checkbox-group>
                    </el-tab-pane>
                    <el-tab-pane label="捕捉选项" name="捕捉选项">
                        <el-switch :active-text="是否启用捕捉_文本" v-model="是否启用捕捉" @change="是否启用捕捉_click"></el-switch>
                        <div style="width:100%;border-top:1px solid rgb(240,240,240)">
                            <el-switch :active-text="是否启用图层捕捉_文本" v-model="是否启用图层捕捉" style="margin-right:15px" :disabled="是否启用图层捕捉_disabled" @change="是否启用图层捕捉_change"></el-switch>
                            <el-switch :active-text="是否启用自身捕捉_文本" v-model="是否启用自身捕捉" :disabled="是否启用自身捕捉_disabled"  @change="是否启用自身捕捉_change"></el-switch>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="创建与更新选项" name="创建与更新选项">
                        <div style="width:100%;display:flex;flex-direction: row;align-items:center;">
                            <span>默认更新工具:&nbsp;</span>
                            <el-radio-group v-model="默认更新工具" @change="默认更新工具_change">
                                <el-radio-button label="变换" value="transform"></el-radio-button>
                                <el-radio-button label="重塑" value="reshape"></el-radio-button>
                                <el-radio-button label="移动" value="move"></el-radio-button>
                            </el-radio-group>
                        </div>
                        <div style="width:100%;display:flex;flex-direction: row;align-items:center;margin-top:5px">
                            <span>默认创建模式:&nbsp;</span>
                            <el-radio-group v-model="默认创建模式" @change="默认创建模式_change">
                                <el-radio-button label="点击" value="click"></el-radio-button>
                                <el-radio-button label="自由" value="freehand"></el-radio-button>
                                <el-radio-button label="混合" value="hybrid"></el-radio-button>
                            </el-radio-group>
                        </div>
                        <div style="width:100%;display:flex;flex-direction: row;align-items:center;margin-top:5px">
                            <span>创建完成后:&nbsp;</span>
                            <el-radio-group v-model="创建完成后" @change="创建完成后_change">
                                <el-radio-button label="停止创建" value="single"></el-radio-button>
                                <el-radio-button label="继续创建" value="continuous"></el-radio-button>
                                <el-radio-button label="更新图形" value="update"></el-radio-button>
                            </el-radio-group>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-main>
    </div>
</template>

<script setup>
/*
    Sketch小部件的特点
    1:必需关联一个GraphicsLayer图层对象,创建或者更新图形都在这个图层上进行
    2:
*/
import {onMounted,ref,computed} from 'vue'
import * as 天地图 from '../天地图'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import Sketch from '@arcgis/core/widgets/Sketch'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
var map,view,sketch,graphicsLayer
const tabs=ref('显示元素')
const 创建工具=ref(["point","polyline","polygon","circle","rectangle"])
const 选择工具=ref(["点选","框选","套索"])
var 创建工具_change=()=>{
    for(let key in sketch.visibleElements.createTools){
        sketch.visibleElements.createTools[key]=false
        for(let item of 创建工具.value){
            if (key===item){
                sketch.visibleElements.createTools[key]=true
            }
        }
    }
}
var 选择工具_change=()=>{
    sketch.viewModel.updateOnGraphicClick=false
    sketch.visibleElements.selectionTools={
        "rectangle-selection":false,
        "lasso-selection":false
    }
    for(let item of 选择工具.value){
        switch(item){
            case "点选":
                sketch.viewModel.updateOnGraphicClick=true
                break
            case "框选":
                sketch.visibleElements.selectionTools["rectangle-selection"]=true
                break
            case "套索":
                sketch.visibleElements.selectionTools["lasso-selection"]=true
                break
        }
    }
}
const 是否启用捕捉=ref(true)
const 是否启用捕捉_文本=computed(()=>{
    return 是否启用捕捉.value===true?"启用捕捉":"禁用捕捉"
})
const 是否启用图层捕捉=ref(true)
const 是否启用图层捕捉_文本=computed(()=>{
    return 是否启用图层捕捉.value===true?"启用图层捕捉":"禁用图层捕捉"
})
const 是否启用自身捕捉=ref(true)
const 是否启用自身捕捉_文本=computed(()=>{
    return 是否启用自身捕捉.value===true?"启用自身捕捉":"禁用自身捕捉"
})
const 是否启用图层捕捉_disabled=ref(false)
const 是否启用自身捕捉_disabled=ref(false)
var 是否启用捕捉_click=()=>{
    if(是否启用捕捉.value){
        是否启用图层捕捉_disabled.value=false
        是否启用自身捕捉_disabled.value=false
        sketch.snappingOptions.enabled=true
    }else{
        是否启用图层捕捉_disabled.value=true
        是否启用自身捕捉_disabled.value=true
        是否启用图层捕捉.value=false
        是否启用自身捕捉.value=false
        sketch.snappingOptions.enabled=false
    }
}
var 是否启用图层捕捉_change=()=>{
    if(是否启用图层捕捉.value){
        sketch.snappingOptions.featureEnabled=true
    }else{
        sketch.snappingOptions.featureEnabled=false
    }
}
var 是否启用自身捕捉_change=()=>{
    if(是否启用自身捕捉.value){
        sketch.snappingOptions.selfEnabled=true
    }else{
        sketch.snappingOptions.selfEnabled=false
    }
}
const 默认更新工具=ref('reshape')
var 默认更新工具_change=()=>{
    switch(默认更新工具.value){
        case "move":
            sketch.defaultUpdateOptions.tool="move"
            break
        case "transform":
            sketch.defaultUpdateOptions.tool="transform"
            break
        case "reshape":
            sketch.defaultUpdateOptions.tool="reshape"
            break
    }
}
const 默认创建模式=ref("freehand")
var 默认创建模式_change=()=>{
    switch(默认创建模式.value){
        case "click":
            sketch.defaultCreateOptions.mode="click"
            break
        case "freehand":
            sketch.defaultCreateOptions.mode="freehand"
            break
        case "hybrid":
            sketch.defaultCreateOptions.mode="hybrid"
            break
    }
}
const 创建完成后=ref('single')
var 创建完成后_change=()=>{
    switch(创建完成后.value){
        case "single":
            sketch.creationMode="single"
            break
        case "continuous":
            sketch.creationMode="continuous"
            break
        case "update":
            sketch.creationMode="update"
            break
    }
}
onMounted(()=>{
    graphicsLayer=new GraphicsLayer()
    map=new Map({
        basemap:{
            baseLayers:天地图.天地图矢量
        },
        layers:[graphicsLayer]
    })
    view=new MapView({
        map:map,
        center:[120,36],
        zoom:12,
        container:"viewDiv",
        constraints:{
            maxScale:1300
        }
    })
    view.ui.remove(["zoom",'attribution'])
    sketch=new Sketch({
        view:view,
        container:"d1",
        layer:graphicsLayer,
        visibleElements:{
            settingsMenu:false
        },
        snappingOptions:{
            enabled:true,
            featureSources:[
                {layer:graphicsLayer, enabled:true }
            ],
            featureEnabled:true,
            selfEnabled:true
        },
        defaultUpdateOptions:{
            tool:"reshape"
        },
        defaultCreateOptions:{
            mode:"freehand"
        },
        creationMode:"single"
    })
})
</script>

<style scoped>
#container,#viewDiv{
    height:100%;width:100%;padding:0;margin:0
}
#tool{
    position:absolute; top:15px;
    left:15px; width:auto; height:auto;
    min-height:200px; box-shadow:0 0 5px gray;
    background-color:white; flex-direction: column;
}
span{
    white-space: pre-line; color:rgb(100,100,100);
    font-size:13.5px
}
</style>